<template>
  <div class="index_content">
      <div class="top_header" @click="goback">
          <img src="@/assets/back.png">
          <div class="title">新春福利</div> 
      </div>
      <div class="page_title">
          <div class="o_title">新年红包</div>
          <div class="t_title">BN金币从天而降</div>
          <div class="r_myprize" @click="gotoMyPrize">中奖记录</div>
      </div>
      <div class="yyy">
          <div class="yyy_img">
              <img :class="dhtype == 0 ? 'dh' :''" src="@/assets/hand.png">
          </div>
      </div>
      <div class="yyy_button">
          <img src="@/assets/yyy_button.png" @click="oneDraw()">
          <div class="des">剩余摇奖次数：<span>{{cjnum}}</span></div>
      </div>
      <div class="rulus">
          <div class="rulus_content">
            <div class="title">活动规则</div>
            <div class="content">
                <!-- <div class="content_des">
                  活动规则:

            活动时间：年初一至年初七
            红包次数：每个账户每天3次，7天一共21次
            奖励发放：即时到账
                </div> -->
                <div class="content_list">
                    <!-- <div class="c_top">活动规则:</div> -->
                    <div class="list">参与方式：点击“摇一摇”按钮即可</div>
                    <div class="list">活动时间：年初一至年初七</div>
                    <div class="list">红包次数：每个账户每天3次</div>
                    <div class="list">奖励发放：即时到账</div>
                    <!-- <div class="list">4、3000BN（15%）</div>
                    <div class="list">5、4000BN（10%）</div>
                    <div class="list">6、5000BN（5%）</div> -->
                </div>
            </div>
          </div>
      </div>

      <div class="mask_content" v-if="tenStatus == true"></div>
      <div class="tc" v-if="tenStatus == true">
          <div class="title"></div>
          <div class="num">{{cjdata.activityRewardTitle}}</div>
          <div class="close" @click="tenStatus = false">开心收下</div>
          <div class="close_bottom" @click="tenStatus = false"></div> 
      </div>
      <!-- <Verify
      @success="'success'"
      :mode="'pop'"     
      :oneDraw="oneDraw"
      :captchaType="'blockPuzzle'"    
          :imgSize="{ width: '330px', height: '155px' }" 
          ref="verify"
      ></Verify> -->
  </div>
</template>

<script>
// import Verify from "../components/verifition/Verify"; 
// import { axios } from "@/utils/axios";
import Shake from 'shake.js';
export default {
  name: 'index',
  components: {
    // Verify
  },
  data() {
    return {
      share:false,
      onshowbg:0,
      swiperOptions: {
          loop:true,
          slidesPerView: 'auto',
          observer:true,
          observeParents:true,
          observeSlideChildren:true,
          autoplay: {
              delay:3000,
              //设置触碰后是否停止自动播放
              disableOnInteraction:false
          },
      // Some Swiper option/callback...
      },
      swiperOptions2:{
        slidesPerView: 'auto',
        direction: 'vertical',
        loop:true,
        observer:true,
        observeParents:true,
        observeSlideChildren:true,
        autoplay: {
            delay:3000,
            //设置触碰后是否停止自动播放
            disableOnInteraction:false
        },
      },
      btc_list:[
        // {
        //   num:123,
        //   name:'BTC',
        //   img:"./assets/BNB.png"
        // },
        // {
        //   num:123,
        //   name:'BTC',
        //   img:"../assets/BTC.png"
        // },
        // {
        //   num:123,
        //   name:'BTC',
        //   img:"../assets/ETH.png"
        // },
        // {
        //   num:123,
        //   name:'BTC',
        //   img:"../assets/USDT.png"
        // }
      ],
      oneStatus:false,
      tenStatus:false,
      winlist:[],
      prizeList:[],
      userIntegral:0,
      activityCode:'box',
      
      oneprize:"",
      tenprize:[],
      codenum:0,
      userinfo:'',
      loading:'',
      token:'',
      imgurl:"",
      num:'',
      captchaVerification:'',
      myShakeEvent: null,
      cjnum:0,
      cjdata:'',
      dhtype:0,
      sjsuo:true
      // Prizemap:[]
    }
  },
  created(){
    // this.drawList()
    // this.getPrize()
    // this.getUserIntegral()
    // this.getByCode()
    
    // this.RewardInfo()
    let _this = this
    this.$dsbridge.callmethod('config', 'h5',data => {
      if (data) {
        _this.token = JSON.parse(data).token
        _this.myPrize()
        // console.log(_this.token)
        // this.$axios.defaults.headers.common['Authorization'] = JSON.parse(data).token
      }
    })
    // 每5秒执行一次逻辑
    setInterval(() => {
      // 显示2秒
      _this.dhtype = 1;
      setTimeout(() => {
        // 隐藏3秒
        _this.dhtype = 0;
      }, 2000);
    }, 5000);
  },
  mounted(){
    // let a = document.getElementsByTagName('html')
    // a.setAttribute('style', 'background:#343941')linear-gradient(#FFC97D,#FF0000)
    document.documentElement.style.background = 'linear-gradient(#FFC97D,#FF0000)';
    //123
    // this.getPermission()
    // 在组件挂载后初始化 Shake 实例
    let myShakeEvent = new Shake({
        threshold: 12, // optional shake strength threshold
        timeout: 500 // optional, determines the frequency of event generation
    });
    myShakeEvent.start();
    window.addEventListener('shake', this.oneDraw, false);
  },
  beforeCreate() {
    this.$dsbridge.callmethod('config', 'h5',data => {
      let token = JSON.parse(data).token
      localStorage.setItem("token", token);
    })
  },
  methods:{
     //获取权限
    getPermission() {
      
      
    },
    myPrize(){
      let _this = this
      this.$axios.get(this.$url + '/xhj-gather-app/open/memberActivityReward/count',{
        
      }).then(res=>{ 
          this.cjnum = res.data.data
          // console.log(res.data.data)
          // if(res.data.code == 200){
          //   if(res.data.data.list == null || res.data.data.list == undefined || res.data.data.list == ''){
          //     this.cjnum = 3
          //   }else if(res.data.data.list.length >= 3){
          //     this.cjnum = 0
          //   }else{
          //     this.cjnum = 3 - res.data.data.list.length
          //   }
          // }
      })
    },
    success(params){
    // params 返回的二次验证参数, 和登录参数一起回传给登录接口，方便后台进行二次验证
      console.log(params)
    },
    // useVerify(){
    //     this.$refs.verify.show()
    // },
    qccode(){
        let _this = this
        this.$axios.get(this.$url + '/xhj-gather-app/open/img/qrcode',{
           
        }).then(res=>{
            _this.imgurl = res.data.msg
        })
    },
    goback(){
      // this.$message({
      //     showClose: true,
      //     message: '恭喜你，这是一条成功消息',
      //     type: 'success'
      //   });
      this.$dsbridge.callmethod('finishNativePage','',res => {
          
      })
    },
    onestatusclose(num){
      if(num == 1){
        this.oneStatus = false
      }else{
        this.tenStatus = false
      }
    },
    RewardInfo(){
      this.$axios.post(this.$url + '/xhj-gather-app/member/info',{
        
      }).then(res=>{
        // this.userinfo = res.data.data
      })
    },
    sharedown(id,wx){
      if(id == 1){
        this.$refs.share_con.saveFile(wx)
      }else{
        this.$refs.share_con2.saveFile(wx)
      }
    },
    
    qjDraw(num){
        if(this.token == '') {
          let _this = this
          this.$dsbridge.callmethod('login', '', data => {
            _this.token = JSON.parse(data).token
            // this.drawList()
            // this.getPrize()
            // this.getUserIntegral()
            // this.getByCode()
            // this.RewardInfo()
            localStorage.setItem("token", _this.token);
          })
          
          return false
        }
        this.num = num
        let dToken = localStorage.getItem("deviceToken")
        this.$axios.post(this.$url + '/xhj-gather-app/memberActivityReward/check',{
          deviceToken:dToken,
        }).then(res=>{
          if(res.data.data == 0){
            this.oneDraw()
          }else if(res.data.data == 1){
            this.num = num
            this.$refs.verify.show()
            // setTimeout(() => {
            //   let captchaVerification = localStorage.getItem("captchaVerification")
            //   this.oneDraw(captchaVerification)
            // }, 2000)
          }else{
            this.$message({
              showClose: true,
              message: '抽取失败，请联系客服',
              type: 'error'
            });
          }
        })
    },

    oneDraw(){
      if(this.sjsuo == false){
        return false
      }
      if(this.token == '') {
          let _this = this
          this.$dsbridge.callmethod('login', '', data => {
            _this.myPrize()
            _this.token = JSON.parse(data).token
            localStorage.setItem("token", _this.token);
          })
          
          return false
      }
      this.sjsuo = false
      if(this.cjnum <= 0){
        this.$message({
          showClose: true,
          message: '次数已用完，明天再来吧',
          duration: 1000,
          type: 'error',
          onClose:()=>{
              this.sjsuo = true
          }
        });
        return false
      }
      this.loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      
      let _this = this
      this.$axios.post(this.$url + '/xhj-gather-app/memberActivityReward/drawV3',{
        // activityCode: _this.activityCode,
        // deviceToken:deviceToken,
        // count: _this.num,
        // captchaVerification:captchaVerification
      }).then(res=>{
        this.loading.close();
        this.onshowbg = 1
        this.myPrize()
        if(res.data.code == 200){
          _this.tenStatus = true
          _this.cjdata = res.data.data
          this.sjsuo = true
        }else{
          this.$message({
            showClose: true,
            message: res.data.msg,
            duration: 1000,
            type: 'error',
            onClose:()=>{
              this.sjsuo = true
            }
          });
        }
          // _this.userIntegral = res.data.data
      })
      .catch(error=>{
        this.loading.close();
        this.msg.close()
        this.msg = this.$message({
          showClose: true,
          message: '请求错误',
          type: 'error'
        });
      })
    },
    getByCode(){
      let _this = this
      this.$axios.get(this.$url + '/xhj-gather-app/open/activity/getByCode',{
        params:{
          activityCode:this.activityCode
        }
      }).then(res=>{
        this.codenum = res.data.data.amount
      })
    },
    getUserIntegral(){
      let _this = this
      this.$axios.post(this.$url + '/xhj-gather-app/memberAccount/getPoint').then(res=>{
        // console.log(res)
        if(res.data.code == 4011){
          _this.userIntegral = 0
        }else{
          _this.userIntegral = res.data.data
        }
          
      }).catch(error=>{
        _this.userIntegral = 0
      })
    },
    getPrize(){
      let _this = this
      this.$axios.get(this.$url + '/xhj-gather-app/open/activityReward/list',{
        params:{
          activityCode: _this.activityCode,
        }
      }).then(res=>{
          _this.prizeList = res.data.data
          // res.data.data.forEach(e => {
          //     _this.Prizemap.push({
          //       id:e.id,
          //       pic:
          //     })
          // });
          // // _this.Prizemap = res.data.
      })
    },
    drawList(){
      let _this = this
      this.$axios.post(this.$url + '/xhj-gather-app/open/memberActivityReward/page',{
        page: 1,
        limit: 50,
        activityCode: _this.activityCode,
        memberFlag: false
      }).then(res=>{
          _this.winlist = res.data.data.list
          
      })
    },
    gotoRules(){
      // let path = `http://192.168.10.45:8080/#/rules`
      let path = `https://static.lianpucom.com/activity/box/#/rules`
      const param = {
        path,
        isShare: false,
        title: true
      }
      this.$dsbridge.callmethod('callNativePage', JSON.stringify(param), data => {})
			
      // this.$router.push('/rules')
    },
    gotoMyPrize(){
      let _this = this
      if(this.token == '') {
        this.$dsbridge.callmethod('login', '', data => {
          _this.token = JSON.parse(data).token
          // this.drawList()
          // this.getPrize()
          // this.getUserIntegral()
          // this.getByCode()
          this.myPrize()
          localStorage.setItem("token", _this.token);
        })
        return false
      }
      // let path = `http://192.168.10.45:3000/#/myprize` 
      let path = `https://static.lianpucom.com/activity/packet/#/myprize`
      const param = {
        path,
        isShare: false,
        title: true
      }
      this.$dsbridge.callmethod('callNativePage', JSON.stringify(param), data => {})

      // this.$router.push('/myprize')
    },
  }
}
</script>
<style lang="scss">

</style>
<style scoped lang="scss">
div{
  box-sizing: border-box;
}
.index_content{
  width: 100%;
  height: 125.67rem;
  background:url(../assets/bg.png) no-repeat;
  background-size: 100%;
  min-height: 100vh;
  padding-top: constant(safe-area-inset-top); /* 适用于iOS 11.2以后 */
  padding-top: env(safe-area-inset-top); /* 适用于iOS 11.0和11.1 */
}
.top_header{
  display: flex;
  align-items:center;
  justify-content: center;
  width: 100%;
  height: 7.42rem;
  padding: 2rem;
  position: relative;
  img{
    position: absolute;
    left: 2rem;
    width: 4rem;
    height: 4rem;
  }
  .title{
    font-size: 3rem;
    font-family: PingFangSC, PingFang SC;
    font-weight: 500;
    color: #FFFFFF;
  }
}
.page_title{
  width: 100%;
  height: 15.33rem;
  position: relative;
  display: flex;
  align-items: center;
  flex-direction: column;
  margin-top: 0.5rem;
  .o_title{
    color: #FF5500;
    font-size: 7rem;
    font-weight: bold;
  }
  .t_title{
    color: #FF5500;
    font-size: 5rem;
    font-weight: bold;
  }
  .r_myprize{
    position: absolute;
    right: 0;
    top:1rem;
    width: 4.67rem;
    height: 12.5rem;
    background: rgba(255,255,255,0.4);
    border-radius: 1rem 0rem 0rem 1rem;
    color: #FF5500;
    font-size: 2rem;
    padding-top:0.5rem;
    // padding:1.08rem 1.33rem;
    box-sizing: border-box;
    letter-spacing:4px;
    writing-mode:vertical-rl;
    text-align: center;
    line-height: 4.78rem;
  }
}
.yyy{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 3.75rem;
  .yyy_img{
    width: 43.33rem;
    height: 43.33rem;
    border-radius: 50%;
    background: #EDC46C;
    overflow: hidden;   
    position: relative;
    transform: translateZ(0px);
  }
  img{
    width: 43.33rem;
    height: 43.33rem;
    
  }
  .dh{
    animation: shake 2s infinite;
    transform: translateZ(0px);
  }
}

@keyframes shake {
  0%, 100% {
    transform: translate(0, 0) rotate(0);
  }
  25% {
    transform: translate(-5px, 5px) rotate(-5deg);
  }
  50% {
    transform: translate(5px, -5px) rotate(5deg);
  }
  75% {
    transform: translate(-5px, 5px) rotate(-5deg);
  }
}

.yyy_button{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin-top: 3rem;
  img{
    width: 35rem;
    height: 10.67rem;
  }
  .des{
    height: 3.33rem;
    font-size: 2.33rem;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    color: #24292E;
    line-height: 3.33rem;
    display: flex;
    align-items: center;
    margin-top: 1rem;
    span{
      height: 3.33rem;
      font-size: 2.33rem;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      color: #24292E;
      line-height: 3.33rem;
    }
  }
}
.rulus{
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 4rem;
}
.rulus_content{
  width: 57.17rem;
  // height: 55.33rem;
  background: #FFFFFF;
  border-radius: 2.67rem;
  display: flex;
  align-items: center;
  flex-direction: column;
  .title{
    width: 23.33rem;
    height: 6.67rem;
    background: #FFE6CF;
    border-radius: 0rem 0rem 2.5rem 2.5rem;
    font-size: 3rem;
    font-family: PingFangSC, PingFang SC;
    font-weight: 600;
    color: #FF5500;
    line-height: 6.67rem;
    text-align: center;
  }
  .content{
    padding: 2.67rem;
    width: 100%;
  }
  .content_des{
    font-size: 2.5rem;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    color: #24292E;
  }
  .content_list{
    // margin-top: 5rem;
    font-size: 2.5rem;
    font-family: PingFangSC, PingFang SC;
    font-weight: 400;
    color: #24292E;
    .list{
      margin-top: 0.5rem;
    }
  }
}
.mask_content{
  display: flex;
  align-content: center;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  height: 100vh;
  position: fixed;
  top:0;
  left: 0;
  z-index: 100;
  background: rgba(0,0,0,0.6);
}
.tc{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 46.67rem;
  height: 46.67rem;
  background: url(../assets/tc.png) no-repeat;
  background-size: 100%;
  z-index: 101;
  margin-left: -23.335rem;
  margin-top: -23.335rem;
  display: flex;
  align-items: center;
  flex-direction: column;
  .title{
    width: 18.83rem;
    height: 4.17rem;
    background: url(../assets/get.png) no-repeat;
    margin-top: 5.33rem;
    background-size: 100%;
  }
  .num{
    height: 6.5rem;
    font-size: 4.67rem;
    font-family: PingFangSC, PingFang SC;
    font-weight: 600;
    color: #F0B90B;
    line-height: 6.5rem;
    margin-top: 1.33rem;
  }
  .close{
    width: 25rem;
    height: 7.33rem;
    background: #FF2F00;
    border-radius: 3.67rem;
    text-align: center;
    font-size: 3rem;
    font-family: PingFangSC, PingFang SC;
    font-weight: 600;
    color: #FFFFFF;
    line-height: 7.33rem;
    margin-top: 16.67rem;
  }
  .close_bottom{
    position: absolute;
    background: url(https://img.528btc.com.cn/activity/box/close.png) no-repeat;
    background-size: 100%;
    width: 5rem;
    height: 5rem;
    top:110%;
    left: 50%;
    z-index: 102;
    margin-left: -2.5rem;
  }
}
</style>
